<template>
	<view class="ynq-Location">
		
		<!-- 字母区域 -->
		<view class="ynq-Letter">
			<view hover-class="Click-Latter" @tap="getLetter('ScrollTop')">*</view>
			<view v-for="(l,i) in LatterName" :key="i" hover-class="Click-Latter" @tap="getLetter(l)">{{l}}</view>
		</view>

		<view class="ynq-AutoLocation dflex jcsb">
			<view class="ynq-AutoAddress">
				<text class="ynq ynq-dizhi"></text>
				<text>当前定位：</text>
				<text>{{CityName}}</text>
			</view>
			
			<view class="ynq-ReLocation dflex" @click="getLocationAuth">
				<u-icon name="reload" color="#000"></u-icon>
				<text class="ml5">重新定位</text>
			</view>
		</view>

		<scroll-view scroll-y="true" class="ynq-ScrollView" :scroll-into-view="LetterId">
			<!-- 热门城市 -->
			<view class="ynq-HotCity" id="ScrollTop">
				<view class="ynq-HotCityTitle">
					<text class="ynq ynq-fire"></text>
					<text>开通城市</text>
				</view>
				
				<view class="ynq-HotCityList flex">
					<text class="radius-3" @tap="getStorage(item)" v-for="(item,index) in HotCity" :key="index">{{item}}</text>
				</view>
			</view>
			<!-- 城市列表 -->
			<view class="ynq-CityList">
				<block v-for="(item,index) in CityList" :key="index">
					<view class="ynq-CityLetter" :id="item.initial">{{item.initial}}</view>
					<view class="ynq-CityLine">
						<text @tap="getStorage(item_city.name)" v-for="(item_city,name_index) in item.list" :key="name_index">{{item_city.name}}</text>
					</view>
				</block>
			</view>
			
			<view class="dflex mt12 p12 f14" style="gap: 12px;">
				<text @click="gotoCityCode">获取CityCode</text>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	var cityData = require('@/packageShop/location/city.json')
	export default{
		data(){
			return {
				CityName:'',
				HotCity : ['广州','演示站'],
				LatterName : ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
				CityList : cityData.city ,//引用json数据
				LetterId : '',
			}
		},
		onLoad() {
			uni.hideLoading()
			this.getCityName()
		},
		methods: {
			//获取定位点
			getLetter(name){
				this.LetterId = name
				uni.pageScrollTo({
					selector:'#'+name,
					duration:300
				})
			},
			//存储城市缓存
		    getStorage(Name){
				uni.setStorage({
					key:'City_Name',
					data:Name
				})
				this.CityName = Name
				console.log("城市",Name);
				
				this.switchCity(this.CityName);			
			},
			switchCity(Name,cityCode) {
				
				if(Name != uni.getStorageSync('City_Name')) {
					uni.removeStorageSync('access_member_info')
					//销毁用户登录类型，因为用手机登录和微信登录走的发布流程不一致
					uni.removeStorageSync("login_type")
					uni.removeStorageSync('domain')
				}
								
				// console.log('location(\'domain\')',uni.getStorageSync('domain'))
				
				// return
				
				uni.setStorage({
					key:'cityCode',
					data:cityCode
				})
				
				uni.setStorage({
					key:'City_Name',
					data:Name
				})
				console.log("");
				let url = "/city/pages/index/index";
				url = "/city/pages/shop/shop";
				uni.redirectTo({url:url})
			
				switch(Name) {
					case '昆明':
						uni.setStorage({
							key:'Domain',
							data:'https://aikm.cn',
							// data:'http://aikm.cc',
							success() {
								uni.redirectTo({
									url:'/pages/index/index'
								})
							}
						})
				    break;
					case '喀什':
						uni.setStorage({
							key:'Domain',
							data:'https://ks.aikm.cn',
							success() {							
								uni.redirectTo({
									url:'/pages/index/index'
								})
							}
						})
				    break;
					case '演示站':
						uni.setStorage({
							key:'Domain',
							data:'https://demo.aikm.cn',
							// data:'http://demo.aikm.cc',
							success() {							
								uni.redirectTo({
									url:'/pages/index/index'
								})
							}
						})
				    break;
					default:
						uni.showModal({
							title:'提示',
							content:'您所选的城市还没有同城趣服务商，请进入主站或申请入驻服务商',
							cancelText:'申请入驻',
							confirmText:'进入主站',
							success(res) {
								//设置主站域名
								uni.setStorage({
									key:'Domain',
									data:'https://aikm.cn'
								})
								//设置默认城市名
								uni.setStorage({
									key:'City_Name',
									data:'昆明'
								})
								if(res.confirm) {
									uni.navigateTo({
										url:'/pages/index/index'
									})
								}
								if(res.cancel) {
									uni.navigateTo({
										url:'/pages/about/about'
									})
								}
							}
						})
				    break;
				}
			},
			//获得城市缓存
			getCityName(){
				let _that = this;
				setTimeout(function(){
					uni.getStorage({
						key:'City_Name',
						success(res) {
							_that.CityName = res.data
						}
					})
				},500)
			},
			fontEndError(content, path) {				
				uni.showLoading({
					title:'错误处理中',
				})
				uni.request({
					url:'https://aikm.cn/api/v1/system/font_end_error',
					method:"POST",
					data:{
						path : path,
						content : content
					},
					success:(ress)=> {
						uni.showToast({
							'title':'错误已记录，会尽快处理！',
							'icon':'success'
						})
					},
					fail() {
						uni.showToast({
							'title':'处理失败',
							'icon':'error'
						})
					}
				})
				uni.hideLoading()
			},
			gotoCityCode() {
				uni.navigateTo({
					url:'/packageShop/location/findCityCode'
				})
			},
			//获取定位
			getLocationAuth(){
				uni.removeStorageSync('access_member_info')
				//销毁用户登录类型，因为用手机登录和微信登录走的发布流程不一致
				uni.removeStorageSync("login_type")
				uni.getLocation({
					type: 'gcj02',
					success:(res)=> {
						let lat = res.latitude;
						let lng = res.longitude;
						let key = '4MBBZ-Y5NKR-7SLWB-WW7XD-U66TE-YEBRD';  //申请地址：https://lbs.qq.com/dev/console/application/mine
						uni.request({
								url:'https://apis.map.qq.com/ws/geocoder/v1/?location='+lat+','+lng+'&key='+key,
								method:"GET",
								success:(ress)=> {
									let data = ress.data; //获取到所有定位的数据
									let cityCode = ress.data.result.ad_info.city_code	
									this.CityName = ress.data.result.address_component.city.replace('市','')
									// console.log('ress',ress)									
									this.switchCity(this.CityName,cityCode)
								},
								fail(content) {
									uni.showToast({
										'title':'对不起，数据获取失败！',
										'icon':'error'
									})
									this.fontEndError(content,'packagesShop/location/location')
								}
						})
					},
					fail(res) {
						uni.showModal({
							title:'提示',
							content:'您拒绝提供地理位置，重新获取请删除小程序或手动选择所在城市',
							showCancel: false
						})
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.ynq-Location{
		height: 100vh;
	}
	.ynq-AutoLocation{
		width: calc(100% - 40rpx);
		background: rgba(250, 250, 250, .5);
		padding:20rpx 20rpx;
		text.ynq{
			font-size:32rpx;
			margin-right:10rpx;
		}
		text{
			font-size:30rpx;
		}
	}
	
	.ynq-HotCity{
		padding:20rpx;
	}
	.ynq-HotCityTitle{
		padding:0rpx 0rpx;
		text.ynq{
			margin-right:10rpx;
			color: #ff0000;
			font-size:32rpx;
		}
		text{
			font-size:30rpx;
		}
	}
	.ynq-HotCityList{
		padding:20rpx 0 0 0;
		flex-wrap: wrap !important;
		text{
			width: 190rpx;
			display: inline-block;
			text-align: center;
			background: rgba(200, 200, 200, .2);
			font-size:26rpx;
			margin: 10rpx;
			padding: 20rpx 10rpx;
		}
	}
	
	.ynq-Letter{
		position: fixed;
		right:5rpx;
		top:180rpx;
		width: 30rpx;
		z-index:100;
		view{
			display: block;
			width: 30rpx;
			text-align: center;
			height: 35rpx;
			line-height: 35rpx;
			font-size: 22rpx;
			transition: ease .3s;
			-webkit-transition: ease .3s;
		}
	}
	
	.ynq-CityList{
		padding:0px 40rpx 0 20rpx;
		.ynq-CityLetter{
			line-height: 30rpx;
			height: 40rpx;
			font-size:24rpx;
			border-bottom:1px solid #f7f7f7;
			padding-left:10rpx;
			color: #909090;
		}
		.ynq-CityLine{
			margin:20rpx 0px;
			text{
				display: block;
				line-height: 60rpx;
				padding:0px 10rpx;
				font-size:30rpx;
				color: #767676;
				&:nth-child(even){
					background-color: rgba(200, 200, 200, .12);
				}
			}
		}
	}
	.ynq-ScrollView{
		height: calc(100vh - 160rpx);
	}
	.Click-Latter{
		font-size:30rpx !important;
	}
</style>